<template>
  <div style="background-color: #FFFFFF; padding: 20px;">
    <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
      <el-form-item label="文件名称" prop="sql_title">
        <el-input v-model="ruleForm.file_name"></el-input>
      </el-form-item>

      <el-form-item label="文件内容" prop="file_data">
        <el-upload
          class="upload-demo"
          ref="upload"
          :action="action_host"
          multiple
          accept="text/txt"
          :limit="1"
          :on-preview="handlePreview"
          :on-remove="handleRemove"
          :on-change="OnChange"
          :file-list="fileList"
          :auto-upload="false">
          <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
          <el-button style="margin-left: 10px;" size="small" type="success" @click="addUpload('file_data')">添加到字段下
          </el-button>
          <el-button style="margin-left: 10px;" size="small" type="danger" @click="delUpload('file_data')">清除字段下文件
          </el-button>
          <span v-if="ruleForm.file_data" style="color: #13ce66">已添加文件</span>
          <span v-else style="color: red">未添加文件</span>
        </el-upload>
      </el-form-item>

      <!--<el-form-item label="文件格式" prop="file_format">-->
        <!--<el-select disabled v-model="ruleForm.file_format" placeholder="请选择格式" style="width: 100%;">-->
          <!--<el-option-->
            <!--v-for="(item,index) in optionsFileFormat"-->
            <!--:key="index"-->
            <!--:label="item.value"-->
            <!--:value="item.id"-->
          <!--&gt;</el-option>-->
        <!--</el-select>-->
      <!--</el-form-item>-->

      <el-form-item label="文件格式" prop="file_format">
        <el-input disabled v-model="ruleForm.file_format"></el-input>
      </el-form-item>

      <el-form-item label="文件大小" prop="file_size">
        <!--<el-input disabled v-model="ruleForm.file_size"></el-input>-->
        <div style="float: left;" v-text="getRenderSize(ruleForm.file_size)">
        </div>
      </el-form-item>

      <el-form-item label="状态" prop="status">
        <el-select v-model="ruleForm.status" placeholder="请选择状态" style="width: 100%;">
          <el-option
            v-for="(item,index) in optionsCommon"
            :key="index"
            :label="item.value"
            :value="item.id"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm()">保存</el-button>
        <el-button @click="resetForm('ruleForm')">重置</el-button>
      </el-form-item>
    </el-form>
  </div>

</template>
<script>
  export default {
    name: 'AddAttachment',
    data() {
      return {
        action_host: this.$http.HOST,
        optionsCommon: [],  // 存储CommonChoices实际数据的列表
        // optionsFileFormat: [],

        EditUrl: this.$http.attachmentURL,  // get编辑的URL
        EditIdStr: 'attachment_id',  // 模块id字符串
        pushObjName: 'attachment',  // 成功后跳转的路由

        // 文件上传
        fileList: [],

        // 文件字段
        // fields: ['file_data'],
        // notSubmitFields: ['header', 'body', 'assert_data', 'response', 'result_data'],


        // 默认不是FormData格式
        FormDataStatus: false,

        ruleForm: {
          file_name: '',//附件名称
          file_format: '',//附件格式
          file_size: '',//附件大小
          // file_data: '',//附件内容
          status: '',//状态
        },  //
        rules: {
          file_name: [
            {required: true, message: '请输入附件名称', trigger: 'blur'}
          ],
          file_format: [
            {required: true, message: '请选择附件格式', trigger: 'blur'},
          ],
          file_data: [
            {required: false, message: '请上传附件', trigger: 'blur'},
          ],

          status: [
            {required: true, message: '请选择状态', trigger: 'change'}
          ],
        }
      };
    },
    created() {
      this.getEditData();   // get回将要编辑的数据
      this.optionsCommon = this.getChoices.common;
      // this.optionsFileFormat = this.getChoices.file_format;
    },
    methods: {
      // 获取格式化后的文件大小
      getRenderSize(value){
        return this.$myTool.getRenderSize(value);
      },

      // 添加到对应的字段下
      addUpload(ruleFormName) {
        this.ruleForm[ruleFormName] = this.fileList[0].raw;
        this.ruleForm.file_size = this.fileList[0].size;
        this.ruleForm.file_format = this.$myTool.getFileType(this.fileList[0].name);
        this.fileList.splice(0, this.fileList.length);
      },
      // 清除字段下文件
      delUpload(ruleFormName) {
        this.ruleForm[ruleFormName] = '';
      },
      // 删除时调用
      handleRemove(file, fileList) {
        this.fileList = fileList
      },
      handlePreview(file) {
        console.log(file);
      },
      // 文件列表发生变化时会更新列表
      OnChange(file, fileList) {
        this.fileList = fileList
      },

      // 提交数据
      submitForm() {
        this.FormDataStatus = true;
        this.$myTool.submitForm(this);
      },

      // get回将要编辑的数据
      getEditData() {
        this.$myTool.getEditData(this)
      },


      // get将要编辑的数据
      resetForm(formName) {
        this.$refs[formName].resetFields();
      }
    },

    computed: {
      getChoices() {
        return this.$store.state.choicesInfo
      }
    },
  }
</script>
